<!-- 游戏库管理界面 -->

<template>
  <div id="bg">
    <el-container>
      <el-aside width="200px">侧边栏

        <el-menu :default-openeds="['1', '3']">//菜单栏

          <el-submenu index="1">//游戏商城

            <template slot="title"><i class="el-icon-message"></i>游戏商城</template>

            <el-menu-item-group>

              <template slot="title">热门游戏</template>

              <el-menu-item index="1-1"><router-link to="/game"
                  style="text-decoration:none">冒险</router-link></el-menu-item>

              <el-menu-item index="1-2"><router-link to="/emp"
                  style="text-decoration:none">闯关</router-link></el-menu-item>

            </el-menu-item-group>

            <el-menu-item-group title="单人游戏">

              <el-menu-item index="1-3"><router-link to="/emp"
                  style="text-decoration:none">休闲</router-link></el-menu-item>

            </el-menu-item-group>

            <el-menu-item-group title="小游戏">

              <el-menu-item index="1-4"><router-link to="/emp"
                  style="text-decoration:none">小游戏</router-link></el-menu-item>

            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="2">//游戏管理

            <template slot="title"><i class="el-icon-message"></i>游戏管理</template>

            <el-menu-item-group>

              <el-menu-item index="2-1"><router-link to="/dept"
                  style="text-decoration:none">游戏库管理</router-link></el-menu-item>

              <el-menu-item index="2-2"><router-link to="/emp"
                  style="text-decoration:none">收藏管理</router-link></el-menu-item>

              <el-menu-item index="2-3"><router-link to="/emp"
                  style="text-decoration:none">分类管理</router-link></el-menu-item>

            </el-menu-item-group>

          </el-submenu>

        </el-menu>

      </el-aside>

      <el-container>

        <el-header>
          游戏服务管理系统

          <el-dropdown>

            <i class="el-icon-setting"></i>

            <el-dropdown-menu slot="dropdown" id="setting">

              <el-dropdown-item><router-link to="/user"
                  style="text-decoration:none">个人信息</router-link></el-dropdown-item>

              <el-dropdown-item><router-link to="/" style="text-decoration:none">退出登录</router-link></el-dropdown-item>

              <el-dropdown-item>修改密码</el-dropdown-item>

            </el-dropdown-menu>

          </el-dropdown>

          <label for="setting"><el-avatar
              src="https://img0.baidu.com/it/u=3532455568,2837988323&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></label>

          <span style="margin-left: 10px; font-size:20px">李华</span>

        </el-header>

        <el-main>//主体内容

          <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="游戏名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>


            <el-form-item label="游戏类型">

              <el-select v-model="searchForm.gender" placeholder="游戏类型">
                <el-option label="单人游戏" value="1"></el-option>
                <el-option label="小游戏" value="2"></el-option>
                <el-option label="休闲类" value="3"></el-option>
              </el-select>

            </el-form-item>



            <el-form-item label="发行日期">
              <el-date-picker v-model="searchForm.entrydata" type="daterange" range-separator="至"
                start-placeholder="发行日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>



            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>




          </el-form>

          <el-table :data="tableData" border>

            <el-table-column prop="name" label="游戏名" width="180">

            </el-table-column>





            <el-table-column label="游戏图标" width="180">

              <template slot-scope="scope">
                <img :src="scope.row.image" width="100px">
              </template>

            </el-table-column>




            <el-table-column label="是否购买" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1 ? '已购买' : '未购买' }}
              </template>
            </el-table-column>




            <el-table-column prop="job" label="评价" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="发行时间" width="180"></el-table-column>




            <el-table-column label="操作" width="200">
              <template slot-scope="scope">

                <el-button type="primary" size="mini"> <router-link to="/shop"
                    style="text-decoration:none">详情页</router-link></el-button>
                <el-button size="mini" @click="handleDelete(scope.row.id)">删除</el-button>

              </template>
            </el-table-column>



          </el-table>

          <el-pagination layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000">
          </el-pagination>

        </el-main>




        <el-footer></el-footer>

      </el-container>

    </el-container>

  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entrydata: []
      }
    };
  },
  methods: {
    handleDelete(id) {
      this.tableData = this.tableData.filter(item => item.id !== id);
    },
    viewDetails(id) {
      alert("查看详情：" + id);
      // 可以根据 id 加载对应游戏的详情页
    },
    onSubmit() {
      alert("查询信息");
    },
    handleSizeChange(val) {
      alert("每页记录数发生变化" + val);
    },
    handleCurrentChange(val) {
      alert("页码发生变化" + val);
    }
  },
  mounted() {
    // 使用 Axios 模拟从服务器获取数据
    axios.get("https://mock.apifox.com/m1/4082804-0-default/goumai/1").then((result) => {
      this.tableData = result.data.data;
    });
  }
};
</script>
  
<style scoped>
@import '../../css/vue.css'; /*引入自定义的css*/
</style> 
  
  
  